<template>
    <template v-for="(item,key) in props.list" :key="key">
        <el-sub-menu v-if="item.children.length!=0" :index="item.id">
            <template #title>
                <el-icon><component :is="icons[key]"></component></el-icon>
                <span>{{item.authName}}</span>
            </template>
            <Submenu :list="item.children"></Submenu>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path">
            <template #title>
                <el-icon><Compass /></el-icon>
                {{item.authName}}
            </template>
        </el-menu-item>
    </template>
    
</template>
<script setup lang="ts">
import {defineProps} from "vue"

const icons=['Clock','ChatLineSquare','Compass','House','Bell']

const props=defineProps({
    list:Array
})
</script>